<template>
  <div>
    <el-row class="breadcrumb">
      <el-col :span="4"><h3>个人设置</h3></el-col>
      <el-col :span="20">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>用户中心</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="center">
            <img src="../../assets/avatar.png">
            <h1>{{userName}}</h1>
          </div>
          <div>
            <small>Email</small>
            <h6>{{email}}</h6>
            <small>Phone</small>
            <h6>{{phone}}</h6>
            <small>Address</small>
            <h6>{{address}}</h6>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-tabs v-model="tableIndex" type="border-card">
          <el-tab-pane label="个人资料" name="userInfo">
            <el-form>
              <el-form-item label="Email">
                <el-input placeholder="Email" v-model="email"></el-input>
              </el-form-item>
              <el-form-item label="Phone">
                <el-input placeholder="Phone" v-model="phone"></el-input>
              </el-form-item>
              <el-form-item label="Address">
                <el-input placeholder="Address" v-model="address"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" round @click="updateMyInfo" :loading="$store.state.loading">更新资料</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="changePass">
            <el-form>
              <el-form-item label="原密码">
                <el-input placeholder="原密码" type="password" v-model="password" required></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input placeholder="新密码" type="password" v-model="repassword" required></el-input>
              </el-form-item>
        <!--      <el-form-item label="确认新密码">
                <el-input placeholder="确认新密码" type="password"></el-input>
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="editPassword2" :loading="$store.state.loading" round>修改密码</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
 import md5 from 'js-md5';
  export default {
    name: "Profile",
    data() {
      return {
        tableIndex: 'userInfo',
        userName:'',
        phone:'18300684211',
        address:'杭州',
        email:'',
        accountId:'',
        password:'',
        repassword:'',

      };
    },

     methods: {

      editPassword2() {
                  this.$confirm('此操作将修改密码, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                  }).then(() => {
                      let that = this;
                      //md5 加密
                      var password = md5(this.password).toUpperCase();
                      var repassword = md5(this.repassword).toUpperCase();

                      this.$http({
                      method: 'post',
                      url: 'http://03c8cffb.ngrok.io/iuhao/user/editPassword',
                      data: {
                        accountId: this.accountId,
                        password: password,
                        repassword: repassword,
                      }
                    }).then(function(res){
                      // alert(res)
                        if(res.data.error){
                          console.log(res.data.message)
                          this.$message(res.data.message);
                          return;
                        }
                        
                      })
                      .catch(function(err){
                         that.$router.push({path: '/my/profile'});
                         return
                      });
          //        this.$message({
          //            type: 'success',
          //            message: '修改成功!'
          //          });
          //         that.$router.push({path: '/dashboard'});
              

                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消修改'
                    });
                  });
                },


      updateMyInfo() {
      this.$http({
        method: 'post',
        url: 'http://03c8cffb.ngrok.io/iuhao/user/updateMyInfo',
        data: {
          accountId: this.accountId,
          phone:this.phone,
          address: this.address,
          email:this.email
        }
      }).then(function(res){
         // alert(res)
          if(res.data.error){
            return;
          }
  
        })
        .catch(function(err){
          console.log(err,'2');
        });
        

      },
      //修改密码
      editPassword() {

      let that = this;
        //md5 加密
        var password = md5(this.password).toUpperCase();
        var repassword = md5(this.repassword).toUpperCase();

        this.$http({
        method: 'post',
        url: 'http://03c8cffb.ngrok.io/iuhao/user/editPassword',
        data: {
          accountId: this.accountId,
          password: password,
          repassword: repassword,
        }
      }).then(function(res){
         // alert(res)
          if(res.data.error){
            console.log(res.data.message)
            return;
          }
          alert("修改成功");
          that.$router.push({path: '/dashboard'});
  
        })
        .catch(function(err){
          console.log(err,'2');
        });
        

      },
      //通过id获取账户信息
      getMyInfo(){
      this.$http({
              method: 'get',
              url: 'http://03c8cffb.ngrok.io/iuhao/user/'+this.accountId+'/getMyInfo',

            }).then(function(res){
              // alert(res)
                if(res.data.error){
                  return;
                }
              accountId = res.data.data.getItem('accountId');
              phone=res.data.data.getItem('phone');
              address=res.data.data.getItem('address');
              email=res.data.data.getItem('email');
              })
              .catch(function(err){
                console.log(err,'2');
              });
          },

    },
    created(){

        this.userName=window.localStorage.getItem("userName");
        this.accountId =window.localStorage.getItem('accountId');
        let that = this;

      this.$http({
              method: 'get',
              url: 'http://03c8cffb.ngrok.io/iuhao/user/'+this.accountId+'/getMyInfo',

            }).then(function(res){
              // alert(res)
                if(res.data.error){
                  return;
                }
              //console.log(res.data.data)
              that.accountId = res.data.data.accountId;
              that.phone= res.data.data.phone;
              that.address=res.data.data.address;
              that.email=res.data.data.email;
              })
              .catch(function(err){
                console.log(err,'2');
              });
     }
     
  }
</script>
